<template>
  <div class="swiper-container10">
    <div class="swiper-wrapper">
      <div class="swiper-slide actor-list" v-for="(e, i) in autor" :key="i">
        <!-- <img :src="`${e.avatar.replace(/w.h/, '570.400')}`" alt="" /> -->
        <img v-lazy="e.avatar.replace(/w.h/, '570.400')" :key="e.avatar"/>
        <p class="actor-p1">{{ e.cnm }}</p>
        <p class="actor-p2">{{ e.desc }}</p>
      </div>
    </div>
  </div>
</template>

<script>
import Swiper from "swiper";
export default {
  name: "autor",
  props: ["autor"],
  mounted() {
   //  console.log(this.autor);
    var mySwiper = new Swiper(".swiper-container10", {
      autoplay: false, //可选选项，自动滑动
      slidesPerView: 4,
      slidesPerGroup: 4,
      observer: true, //修改swiper自己或子元素时，自动初始化swiper
      observeParents: true, //修改swiper的父元素时，自动初始化swiper
    });
  },
};
</script>

<style lang="scss" scoped>
.actor-list {
   display: flex;
   flex-direction: column;
    align-items: center;
  img {
    width: 82px;
    height: 120px;
    border-radius: 7px;
    object-fit: cover;
  }
  .actor-p1 {
    font-size: 12px;
    padding: 3px 0;
    color: #fff;
  }
  .actor-p2 {
    font-size: 12px;
    color: rgb(240, 240, 240);
  }
}
</style>